<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 显示省 -->
    <select id="province">
        <option>选择省份</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市区</option>
    </select>
    
    <script>
        // 1、省市地区二级联动，页面加载完毕后显示出可以选择的省份，当省改变显示省份对应的市
        // 2、实现省市区三级联动(可选)
        // data变量保存着所有的省市相关的信息， 由于省存在多个 所以使用数组格式。由于省存在名称 并且下级还存在一些市 所以data使用数组套对象格式
        var data  = [
            {
                name:'湖北省',
                children:['武汉市','荆州市','洪湖市','黄冈市']
            },
            {
                name:'广东省',
                children:['广州市','深圳市','珠海市','东莞市']
            },
            {
                name:'湖南省',
                children:['长沙市','岳阳市','湘潭市','株洲市']
            }
        ];
        // 1、显示出所有的省
        var provinceHtml = '<option value="-1">选择省份</option>';
        data.forEach(function(item,index){
            // value属性是为了记录每一个option 对应的在data中元素的序号
            provinceHtml += `<option value="${index}">${item.name}</option>`
        })
        document.querySelector('#province').innerHTML = provinceHtml
        // 2、设置省的onchange事件
        document.querySelector('#province').onchange = function(){
            if(this.value<=0){
                return;
            }
            console.log(this.value)
            // 如果目前 获取到的是省份的名称  可以对data进行遍历 每一个元素比较 名称是否相同，如果相同 获取到元素下的children 就可以得到所有的市
            // 如果可以直接通过data[下标]方式获取到选中的省的信息，就可以避免循环
            // this.value 获取到当前选中的option对应的省在data中序号
            // data[this.value] 表示具体某一个省  格式为对象
            // data[this.value].children 表示省下所有市
            var cityHtml = '<option>选择市区</option>';
            data[this.value].children.forEach(function(item){
                cityHtml += `<option>${item}</option>`
            })
            document.querySelector('#city').innerHTML = cityHtml
        }


    </script>
</body>
</html>